<template>
  <div class="topicdetail">
    <div class="loading1" v-if="topic.length<=0">
      <van-loading size="30px" color="#fbb705">加载中...</van-loading>
    </div>
    <div class="top" :style="{backgroundColor:(topStyle==true ? '#fff' : '')}" v-if="topic.length>0">
      <div class="arrow-left" @click="onBack">
        <van-icon name="arrow-left" :color="topStyle ? '#000':'#fff'" size="25" />
      </div>
      <div class="share" @click="onShare">
        <van-icon name="share-o" :color="topStyle ? '#000':'#fff'" size="25" />
      </div>
    </div>
    <div class="content" v-if="topic.length>0" ref="content" @scroll="onscroll">
      <div class="cover_image" ref="image">
        <img :src="topic[0].cover_image" alt="" />
      </div>
      <div class="title">
        <div class="tags" v-for="(item, index) in topic[0].tag_list" :key="index">
          <img :src="item.img" alt="" />{{ item.name }}
        </div>
        <div class="name">{{ topic[0].share_info.name }}</div>
      </div>
      <div class="users">
        <div class="user-p" v-for="(item2,index2) in topic[0].users" :key="index2">
          <img
            :src="item2.p"
            alt=""
          />
        </div>
        <div class="text">已有{{topic[0].content_count}}人参与</div>
      </div>
      <div class="descriptions" v-if="topic[0].description.length > 0">
        <div class="description" v-for="(item3,index3) in topic[0].description" :key="index3">{{item3}}</div>
      </div>
        <div class="container-water-fall" ref="c">
          <waterfall
            :col="col"
            :width="itemWidth"
            :gutterWidth="gutterWidth"
            :data="dataList"
          >
            <template>
              <div
                class="notes-item"
                v-for="(item4, index4) in dataList"
                :key="index4"
                @click="toNoteDetails(item4.note.id)"
              >
                <div class="notes-item-img">
                  <div
                    class="notes-item-icon"
                    v-if="item4.note.images.length > 1"
                  >
                    <img :src="atlasIcon" alt="" />
                  </div>
                  <div class="play-icon" v-if="item4.note.video_url">
                    <van-icon
                      class="i"
                      name="play-circle-o"
                      size="40"
                      color="#fff"
                    />
                  </div>
                  <img :src="item4.note.image_u" alt="" />
                </div>
                <div class="notes-item-title" v-if="item4.note.title != ''">
                  {{ item4.note.title }}
                </div>
                <div class="author">
                  <div class="author-left">
                    <img :src="item4.note.author.p" alt="" />
                    <div class="name">{{ item4.note.author.n }}</div>
                  </div>
                </div>
              </div>
            </template>
          </waterfall>
        </div>
      <div class="loading" v-if="isloading">
        <van-loading size="24px" color="#fbb705">加载中...</van-loading>
      </div>
    </div>
    <van-share-sheet
      v-model="showShare"
      :options="options"
      @select="onselect"
      @cancel="oncancel"
      @click-overlay="onClickOverlay"
    />
  </div>
</template>

<script>
export default {
  name: "Topicdetail",
  data() {
    return {
      topicid: "",
      offset: 0,
      showShare: false,
      isloading: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
        ],
      ],
      dataList: [],
      col: 2,
      atlasIcon: require("../assets/atlas.png"),
      topic: [],

      topStyle:false
    };
  },
  created() {
      this.topicid = this.$route.query.id
      
    this.getTopicdetail();
  },
  computed: {
    itemWidth() {
      return 375 * 0.5 * (document.documentElement.clientWidth / 375);

      //rem布局 计算列宽度

      //可以根据自己的rem设置修改这里的 334 值
    },

    gutterWidth() {
      return 0 * 0.5 * (document.documentElement.clientWidth / 375);

      //rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)

      //可以根据自己的rem设置修改这里的 36 值
    },
  },
  methods: {
    getTopicdetail() {
      this.isloading = true;
      this.axios({
        method: "get",
        url: "note/topicdetail",
        params: {
          topicid: this.topicid,
          offset: this.offset,
          limit: 20,
        },
      }).then((result) => {
        
        if (result.data.state == "success") {
          result.data.result.topic.description =  result.data.result.topic.description.split('\n') 
          this.topic.push(result.data.result.topic);
          result.data.result.list.forEach(ele=>{
          this.dataList.push(ele);
          })
          this.offset += 20;
          this.isloading = false;
        }
      });
    },
    onscroll(e) {
      const imageHeight = this.$refs.image.offsetHeight
      const scrollTop = this.$refs.content.scrollTop
      if(scrollTop >= imageHeight){
        this.topStyle = true
      }else{
        this.topStyle = false
      }
      const contentHeight = this.$refs.content.offsetHeight;
      const cHeight = this.$refs.c.offsetHeight;
      if (
        cHeight - (e.target.scrollTop + contentHeight) < 50 &&
        !this.isloading
      ) {
        this.getTopicdetail();
      }
    },
    onBack() {
      this.$router.go(-1);
    },
    onShare() {
      this.showShare = true;
    },
    onselect() {
      this.$toast.success("分享成功");
      this.showShare = false;
    },
    oncancel() {
      this.showShare = false;
    },
    onClickOverlay() {
      this.oncancel();
    },
    switchCol(col) {
      this.col = col;
    },
    toNoteDetails(id){
      this.$router.push({name:'NoteDetails',query:{nid:id}})
    },
  },
};
</script>

<style lang="scss" scoped>
.topicdetail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
  .loading1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .top {
    width: calc(100% - 30px);
    padding: 45px 15px 15px;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
    z-index: 999;
  }
  .content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    overflow-y: auto;
    .cover_image {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .title {
      width: calc(100% - 20px);
      padding: 10px;
      display: flex;
      align-items: center;
      .tags {
        background-color: #e2483c;
        color: #fff;
        padding: 3px 10px;
        border-radius: 20px;
        img {
          width: 10px;
          height: 10px;
        }
      }
      .name {
        font-size: 20px;
        margin-left: 15px;
      }
    }
    .users {
      width: calc(100% - 40px);
      padding: 0 20px;
      display: flex;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-left: -8px;
      }
      .text {
        margin-left: 5px;
        color: #999;
      }
    }
    .descriptions {
      padding: 0 10px;
      margin: 10px 0;
      .description {
        margin-bottom: 2px;
      }
    }
    .container-water-fall {
      .notes-item {
        background: #ffffff;
        border-radius: 5px;
        margin: 6px;
        .notes-item-img {
          position: relative;
          .notes-item-icon {
            width: 15px;
            height: 15px;
            padding: 5px;
            border-radius: 50%;
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 9;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .play-icon {
            position: absolute;
            top: calc(50% - 20px);
            left: calc(50% - 20px);
            z-index: 9;
          }
          img {
            border-radius: 5px 5px 0 0;
            width: 100%;

            height: auto;
          }
        }
        .notes-item-title {
          font-size: 13px;
          padding: 0 5px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .author {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
          padding: 10px 5px;
          .author-left {
            display: flex;
            align-items: center;
            width: 70%;
            img {
              width: 25px;
              height: 25px;
              border-radius: 50%;
              margin-right: 5px;
            }
            .name {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .loading {
      width: 100%;
      margin-top: 10px;
      text-align: center;
    }
  }
}
</style>